<template>
   
        
        <scroll-view scroll-y="true" class="comboC">

            <skeleton
                :showSkeleton="showSkeleton">
                    <block slot="content">
                            <block v-for="(item,index) in comboData" :key="index">
                                <v-banner @navToDetailPage="navToDetailPage" :metaData="item.data" v-if="item.code=='banner'" ></v-banner>
                                <v-section :metaData="item.data" v-if="item.code=='section'"></v-section>
                                <v-countdown :metaData="item.data" v-if="item.code=='countdown'" ></v-countdown>
                                <v-todo :theme="theme" :metaData="item.data" v-if="item.code=='todo'"></v-todo>
                                <v-exam :dataFromCode="code" :metaData="item.data" v-if="item.code=='exam'"></v-exam>  
                            </block>
                    </block>
            </skeleton>        
        </scroll-view>
</template>

<script>

    import vBanner from '../vbanner/index';
    import vSection from '../vsection/index';
    import vList from '@/components/common/panel/list/index';

    import VTabhead from '../vtabhead/index';
    import VTodo from '../vtodo/index';
    import VExam from '../vexam/index';
    import vCountdown from '../vcountdown/index';
	import user from '@/mixins/user/index'
    import HomeService from '@/services/homepage/index';
	 
    const homeService = new HomeService();
    export default {
		mixins:[user],
        props:{
            currentCode:{
                type:String,
                default:''
            },
			currentIndex:{
				type:Number,
				default:0
			},
            code:{
                type:String,
                default:''
            },
            refresh:{
                type:Boolean,
                default:false
            }
        },
        data() {
            return {
                comboData:undefined,
                theme:'',
                showSkeleton:true,
            }
        },
		computed:{
			indexAndCode(){
				return `${this.currentIndex}+${this.currentCode}`
			}
		},
        components: {
            vBanner,
            vSection,
            vList,
            VTabhead,
            VTodo,
            VExam,
            vCountdown
        },
        watch: {
            // currentCode:function(newVal){
            //     this.loadDataByCode();
            // },
			indexAndCode:function(newValue){
				this.loadDataByCode();
			},
            refresh:function(newVal){
                if(newVal){
                    this.loadDataByCode();
                    /*提交 refresh false */
                    this.$emit("closeRefresh")
                }
            }
        },
        methods: {
                navToDetailPage(item) {
                    if(item.jumpType==2)
                    {
                        //学习类型
                        uni.navigateTo({
                            url: "/pages/tabbar/study/details/index?id="+item.jumpId+"&type="+item.learnType
                        });
                    }else{
                        //考试类型

                    }
                },
                loadDataByCode(){
                    if(this.currentCode!=this.code){
                        return;
                    }
                    // if(this.comboData!=undefined){
                    //     return;
                    // }
					//this.userData.roleType
                    homeService.panelDetail({code:this.code,roleType:this.userData.roleType}).then(resultDto => {
                            console.log('resultDto:',resultDto)
                                    if (resultDto.success) {
                                        this.comboData = resultDto.result.list;
                                        this.theme = resultDto.result.theme;
                                    }
                                }).then(()=>{
                                        this.showSkeleton = false;
                                });
                }
        },
        mounted(){
                this.loadDataByCode();
        }
    }
</script>

<style rel="stylesheet/css" scoped>
    .container {
        width: 100%;
        height: 100%;
    }
</style>
